<template>
  <div>
    <loading></loading>
    <div class="BBS_leftab">
      <div @mouseout="search2" id="BBSearch_box">
        <div id="BBS_search" @mouseover='search' >
          search
        </div>
        <input type="text" placeholder="请输入" id="BBS_input" ref="input" @mouseover='search'>
      </div>
      <div id="BBS_hblank"></div>
      <div class="BBS_return">
        <input type="button" value="返回" id="btn3" class="return_btn" /></div>
      <div class="BBSLtab_head">
        个人中心
      </div>
    </div>
    <div class="BBS_box">
      <div class="BBS_context">
        <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="content">
          <el-form-item label="姓名" prop="pass">
            <el-input type="text" v-model="ruleForm2.pass" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="年龄" prop="age">
            <el-input v-model.number="ruleForm2.age"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio v-model="radio" label="1">男</el-radio>
            <el-radio v-model="radio" label="2">女</el-radio>
          </el-form-item>
          <el-form-item label="爱好">
            <div>
              <el-checkbox v-model="checked">旅游</el-checkbox>
              <el-checkbox >登山</el-checkbox>
            </div>
            <div>
              <el-checkbox >健身</el-checkbox>
              <el-checkbox >上网</el-checkbox>
            </div>
          </el-form-item>
          <el-form-item label="学历">
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="自我介绍" prop="checkPass">
            <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="textarea">
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
            <el-button @click="resetForm('ruleForm2')">重置</el-button>
          </el-form-item>
        </el-form>

      </div>
    </div>
  </div>
</template>

<script>
  import loading from '@/components/loading'
  export default {
    data() {
      var checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('年龄不能为空'));
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'));
          } else {
            if (value < 18) {
              callback(new Error('必须年满18岁'));
            } else {
              callback();
            }
          }
        }, 1000);
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入姓名'));
        } else {
          if (this.ruleForm2.checkPass !== '') {
            this.$refs.ruleForm2.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入自我介绍'));
        } else {
          callback();
        }
      };
      return {
        radio: '2',
        textarea: '',
        checked: true,
        value:'',
        options: [{
          value: '选项1',
          label: '初中'
        }, {
          value: '选项2',
          label: '高中'
        }, {
          value: '选项3',
          label: '专科'
        }, {
          value: '选项4',
          label: '本科'
        }],
        ruleForm2: {
          pass: '',
          checkPass: '',
          age: '',
        },
        rules2: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ],
          age: [
            { validator: checkAge, trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      pushItems() {
        this.items.push(this.value)
      },
      del(index) {
        this.items.splice(index,1)
      },
      search(){
        this.$refs.input.style.display = 'block';
      },
      search2(){
        this.$refs.input.style.display = 'none';
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    },
    components:{
      loading
    }
  }
</script>
<style scoped>
  @import "../css/foodBBS.css";
  .content{
    margin: 10px auto;
    overflow: hidden;
  }
  .content div{
    text-align: center;
  }

</style>
